<template>
    <card title="已选标签" class="selected-tag-box">
        <template v-if="!props.currentCheckObjTags.length">
            <div class="city-box">
                <div class="tag-title">
                    <label>城市</label>
                    <template v-if="cityList.length > showMun">
                        <label class="toggle-label" @click="toggleShow">{{ isFold ? '展示全部' : '收起' }}</label>
                    </template>
                </div>
                <div class="city-list">
                    <div v-for="(item, index) in getCitys" :key="index" class="city-item">
                        <tag :name="item[cityLabel].toString()" @del="deleteTag(index)"></tag>
                    </div>
                </div>
            </div>
            <div v-if="props.categoryTags.length">
                <div class="tag-title">
                    <label>电商行为标签</label>
                    <template v-if="categoryTags.length > showMun">
                        <label class="toggle-label" @click="toggleShowCategory">{{ isFoldCategory ? '展示全部' : '收起' }}</label>
                    </template>
                </div>
                <div class="people-item">
                    {{ getCategoryTags.join('、') }}
                </div>
            </div>
            <div>
                <div class="tag-title">
                    <label>人群标签</label>
                </div>
                <div class="people-item">
                    {{ props.peopleTags.map(item => item[peopleLabel]).join('、') }}
                    <template v-if=" props.peopleTags.length && props.preferenceTags.length">
                        、
                    </template>
                    {{ props.preferenceTags.join('、') }}
                    <template v-if="!props.peopleTags.length && !props.preferenceTags.length">
                        不限
                    </template>
                </div>
            </div>
        </template>
        <div v-else>
            <div class="tag-title">
                <label>精选人群</label>
            </div>
            <div class="people-item">
                {{ props.currentCheckObjTags.map(item => item[peopleLabel]).join('、') }}
            </div>
        </div>
    </card>
</template>

<script lang="ts" setup>
import Card from '@/components/Card/index.vue';
import tag from '@/components/tag.vue';
import { ref, toRefs, computed } from 'vue';
import { cityModel, peopleModel } from '../strategy.module';
import { Toast } from 'vant';

export interface Props {
    citys: cityModel[];
    cityLabel?: string;
    cityCode?: string;
    peopleTags: peopleModel[];
    peopleLabel?: string;
    peopleCode?: string;
    preferenceTags?: string[];
    currentCheckObjTags?: peopleModel[];
    categoryTags?: string[];
}
const props = withDefaults(defineProps<Props>(), {
    cityLabel: 'name',
    cityCode: 'tgCode',
    peopleLabel: 'name',
    peopleCode: 'id',
    preferenceTags: () => [],
    currentCheckObjTags: () => [],
    categoryTags: () => [],
});

const { citys, categoryTags } = toRefs(props);
const cityList = ref<cityModel[]>([]);
cityList.value = citys.value;
const showMun = 8;
// 数据是否折叠
const isFold = ref<boolean>(true);
const isFoldCategory = ref<boolean>(true);
function toggleShow() {
    isFold.value = !isFold.value;
}

function toggleShowCategory() {
    isFoldCategory.value = !isFoldCategory.value;
}

const getCitys = computed(() => {
    if(isFold.value) {
        return cityList.value.slice(0, showMun);
    }
    return cityList.value;
});

const getCategoryTags = computed(() => {
    if(isFoldCategory.value) {
        return categoryTags.value.slice(0, showMun);
    }
    return categoryTags.value;
});

const emit = defineEmits(['changeCity']);
function deleteTag(index: number) {
    if(cityList.value.length < 2) {
        return Toast.fail('不能删除最后一个');
    }
    cityList.value.splice(index, 1);
    console.log(44, cityList.value);
    emit('changeCity', cityList.value);
}
</script>

<style scoped lang="scss">
.selected-tag-box {
    .tag-title {
        font-size: 14px;
        color: #5b5b5b;
        padding-top: 16px;
        padding-bottom: 8px;
        display: flex;
        justify-content: space-between;
        .toggle-label {
            font-size: 13px;
            color: #397ff8;
        }
    }
    .city-box {
        .city-list {
            .city-item {
                display: inline-block;
            }
        }

        border-bottom: 0.5px solid #eeeeee;
    }
    .people-item {
        font-size: 14px;
        color: #333333;
    }
}
</style>
